<template>
  <el-card>
    <div slot="header">
      <h3>集团指导加价率-编辑</h3>
    </div>
    <div class="page-body">
      <BtnRender :render="renderBtnsBar" />
      <el-divider />
      <!-- 发起原因输入框 -->
      <LaunchReasonInput required :reason.sync="launchReason" />
      <el-row>
      <SkusTable
        :defaultMinWidth="100"
        :loading="TableInfo.loading"
        :columns="TableInfo.columns"
        :dataSource="TableInfo.list"
        @handleCancelSelect="handleRemoveRow"
      />
    </el-row>
    </div>
  </el-card>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import SkusTable from '@/components/skusTable';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import { TableInfo, openConfirmError, openConfirmTips } from '@/utils/getUtils';
import { getListPageBtnsBar } from '@/utils/getBtnsRender';
import { TABLE_COLUMNS } from './constants/edit';
import { OPE_TYPES, COMMIT_TYPES, getMessageColumns } from '@/constants/markupRate';
import {
  importProductMarkupRateDataUrl,
  commitProductMarkupRateRecordService
} from '@/api/basics/categoryManage/guideMarkupRate';
export default {
  components: {
    BtnRender,
    SkusTable,
    LaunchReasonInput
  },
  data () {
    return {
      launchReason: '', // 发起原因
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      btnLoading: {
        export: false,
        submit: false
      },
      isIgnoreTipMsg: false, // 是否忽略异常范围提示（首次提交不忽略，页面存在有异常范围的需业务确认，再次提交时候可忽略直接生成单据）
    }
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const redirectBtn = {
        label: '导出数据源',
        method: this.handleExportDataSource
      }
      const importBtn = {
        label: '导入',
        action: importProductMarkupRateDataUrl,
        methods: { handleUploadSuccess: this.handleUploadSuccess },
        isImport: true,
        loadingFn: this.TableInfo.setLoading,
        data: { commitType: COMMIT_TYPES.Group }
      }
      const submitBtn = {
        label: '提交',
        method: this.handleSubmit,
        disabled: this.TableInfo.isNullList(),
        loading: this.btnLoading.submit
      }
      const gobackBtn = { label: '返回', method: this.handleGoBack, type: 'default' }
      const btnBars = [gobackBtn, redirectBtn, importBtn, submitBtn]
      return getListPageBtnsBar(h, btnBars, null, 'end')
    },
    // 删除
    handleRemoveRow ({ index }) {
      this.TableInfo.removeList(index)
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'guideMarkupRateList' })
    },
    // 导出数据源
    handleExportDataSource () {
      const { href } = this.$router.resolve({ name: 'guideMarkupRateList' })
      window.open(href, '_blank')
    },
    // 导入成功
    handleUploadSuccess (res) {
      if (res?.retData) this.TableInfo.setList(res.retData)
    },
    // 提交
    async handleSubmit (isIgnoreTipMsg = false) {
      if (!this.launchReason) return this.$message.warning('发起原因不能为空')
      const data = {
        commitProductMarkupRateRecordDetailParams: this.TableInfo.list,
        isIgnoreTipMsg, // 是否忽略异常范围提示（点击提交不忽略，页面存在有异常范围的需业务确认，点击仍要提交时候可忽略直接生成单据）
        opeType: OPE_TYPES.Edit,
        commitType: COMMIT_TYPES.Group,
        launchReason: this.launchReason
      }
      const loadingFn = state => { this.btnLoading.submit = state }
      const res = await commitProductMarkupRateRecordService(data, loadingFn)
      if (res?.retData) this.executeSubmitedTask(res.retData)
    },
    // 执行提交后的回调任务
    executeSubmitedTask (retData) {
      const processSetInfo = () => {
        this.TableInfo.setColumns([...getMessageColumns(retData), ...TABLE_COLUMNS])
        this.TableInfo.setList(retData.commitProductMarkupRateRecordDetailVos)
      }
      const processTipSubmit = () => { this.handleSubmit(true) } // 仍要提交执行回调
      if (retData.hasErrorData) return openConfirmError(processSetInfo) // 提交有错误
      if (retData.hasTipMsg) return openConfirmTips(processTipSubmit, processSetInfo) // 提交有异常
      // 提交成功
      this.$message.success('提交成功')
      this.handleGoBack()
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 10px 0;
}
</style>
